import React, { useState } from 'react';
import { Card, Form, Input, Button, Table, Tag, Select, Space, Tooltip } from 'antd';
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './styles.css';

interface SearchFormData {
  dictCode?: string;
  dictName?: string;
  category?: string;
}

// 模拟数据
const mockData = [
  {
    id: 'DICT001',
    dictCode: 'RESOURCE_TYPE',
    dictName: '数据资源类型',
    category: '基础字典',
    itemCount: 8,
    updateTime: '2023-12-15 14:30:00',
    status: 'enabled',
    description: '定义数据资源的类型分类'
  },
  {
    id: 'DICT002',
    dictCode: 'DATA_FORMAT',
    dictName: '数据格式',
    category: '基础字典',
    itemCount: 12,
    updateTime: '2023-12-14 09:15:00',
    status: 'enabled',
    description: '定义数据资源的格式类型'
  },
  {
    id: 'DICT003',
    dictCode: 'ACCESS_METHOD',
    dictName: '访问方式',
    category: '系统字典',
    itemCount: 5,
    updateTime: '2023-12-13 16:45:00',
    status: 'disabled',
    description: '定义数据资源的访问方式'
  }
];

// 字典分类选项
const categoryOptions = [
  { value: 'basic', label: '基础字典' },
  { value: 'system', label: '系统字典' },
  { value: 'business', label: '业务字典' }
];

const DictionaryList: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(mockData);
  const navigate = useNavigate();

  const handleSearch = (values: SearchFormData) => {
    setLoading(true);
    // 模拟API请求
    setTimeout(() => {
      setLoading(false);
      console.log('搜索条件:', values);
    }, 500);
  };

  const handleAdd = () => {
    navigate('/global-info/dictionary/add');
  };

  const handleEdit = (record: any) => {
    navigate(`/global-info/dictionary/${record.id}`);
  };

  const handleDelete = (record: any) => {
    // 实现删除逻辑
    console.log('删除:', record);
  };

  const handleViewDetail = (record: any) => {
    navigate(`/global-info/dictionary/${record.id}`);
  };

  const columns = [
    {
      title: '基础支撑平台',
      dataIndex: 'platform',
      key: 'platform',
      width: 150,
      render: () => '上海（SH）',

    },
    {
      title: '字典编码',
      dataIndex: 'dictCode',
      key: 'dictCode',
      width: 150,
      render: (text: string, record: any) => (
        <a onClick={() => handleViewDetail(record)}>{text}</a>
      )
    },
    {
      title: '字典名称',
      dataIndex: 'dictName',
      key: 'dictName',
      width: 150
    },
    {
      title: '字典分类',
      dataIndex: 'category',
      key: 'category',
      width: 120
    },
    {
      title: '字典项数量',
      dataIndex: 'itemCount',
      key: 'itemCount',
      width: 100
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => (
        <Tag color={status === 'enabled' ? 'success' : 'default'}>
          {status === 'enabled' ? '启用' : '停用'}
        </Tag>
      )
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: 200,
      ellipsis: {
        showTitle: false
      },
      render: (description: string) => (
        <Tooltip placement="topLeft" title={description}>
          {description}
        </Tooltip>
      )
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: 160
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render: (_: any, record: any) => (
        <Space size="middle">
          <a onClick={() => handleEdit(record)}>
            <EditOutlined /> 编辑
          </a>
          <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
            <DeleteOutlined /> 删除
          </a>
        </Space>
      )
    }
  ];

  return (
    <div className="dictionary-list-container">
      {/* 搜索栏 */}
      <Card className="search-card">
        <Form
          form={form}
          layout="inline"
          onFinish={handleSearch}
          className="search-form"
        >
          <Form.Item name="dictCode" label="字典编码">
            <Input placeholder="请输入字典编码" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item name="dictName" label="字典名称">
            <Input placeholder="请输入字典名称" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item name="category" label="字典分类">
            <Select
              placeholder="请选择字典分类"
              style={{ width: 200 }}
              options={categoryOptions}
              allowClear
            />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={loading}>
                搜索
              </Button>
              <Button onClick={() => form.resetFields()}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      {/* 列表 */}
      <Card 
        className="list-card"
        title="数据资源字典列表"
        extra={
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
            新增字典
          </Button>
        }
      >
        <Table
          columns={columns}
          dataSource={data}
          rowKey="id"
          loading={loading}
          pagination={{
            total: data.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`
          }}
        />
      </Card>
    </div>
  );
};

export default DictionaryList; 